<template>
	<z-paging
		ref="paging"
		style="min-height: 100%;background: rgba(255,255,255,0.8);"
		v-model="dataList"
		:show-loading-more-when-reload="true"
		:refresher-enabled="false"
		:auto-show-back-to-top="true"
		@query="queryList"
	>
		<template #top>
			<slot name="top"></slot>
		</template>
		<view class="home">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<armed-card :data="item"></armed-card>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import HomeAPI from '@/api/home/api.ts';
const paging = ref(null);
const dataList = ref([]);
const props = defineProps({
	routeType: { type: String, default: '' },
	routeCategoryId: { type: String, default: '' }
});

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
	// 此处请求仅为演示，请替换为自己项目中的请求
	let params = {
		pageNum: pageNo,
		pageSize: pageSize,
		routeCategoryId: props.routeCategoryId,
		routeType: props.routeType
	};
	HomeAPI.getRoutePage(params)
		.then(({ data }) => {
			paging.value.complete(data.records);
		})
		.catch(() => {
			paging.value.complete(false);
		});
};
</script>
<style scoped lang="scss">
.home {
	height: calc(100% - 140rpx);
	position: relative;
	padding-top: 20rpx;
}
</style>
